<template>
  <div class="content">
    <NCard class="info" title="个人信息">
      <p><label>用户名</label>{{ user.user.Username }}</p>
      <p>
        <label>余额</label>{{ user.user.Money }}
        <NButton @click="() => (chargeShow = true)" style="margin-left: 1em"
          >充值</NButton
        >
      </p>
      <p><label>手机</label>{{ user.user.Telephone }}</p>
      <p><label>地址</label>{{ user.user.Address }}</p>
      <p>
        <NButton @click="() => (infoShow = true)" style="color: #008cff" text
          >编辑联系方式</NButton
        >
      </p>
      <NModal title="充值" preset="dialog" v-model:show="chargeShow">
        <div class="wrapper">
          <NInputNumber
            class="flex-1"
            v-model:value="moneny"
            :min="0"
            :show-button="false"
          />
          <NButton type="primary" @click="chargeMoney">充值</NButton>
        </div>
      </NModal>
      <NModal v-model:show="infoShow">
        <NCard class="edit-info" title="编辑">
          <NForm>
            <NFormItem label="电话">
              <NInput v-model:value="user.user.Telephone" />
            </NFormItem>
            <NFormItem label="地址">
              <NInput v-model:value="user.user.Address" />
            </NFormItem>
            <NButton @click="editUserInfo" type="primary">提交</NButton>
          </NForm>
        </NCard>
      </NModal>
    </NCard>

    <NCard class="order" title="订单详情">
      <NTabs type="line">
        <NTabPane name="未完成">
          <Order :status="1" />
        </NTabPane>
        <NTabPane name="全部订单">
          <Order :status="0" />
        </NTabPane>
      </NTabs>
    </NCard>
  </div>
</template>

<script lang="ts" setup>
import {
  NCard,
  NButton,
  NModal,
  NForm,
  NFormItem,
  NInput,
  NInputNumber,
  NTabs,
  NTabPane,
  useMessage,
} from "naive-ui";
import { ref } from "vue";
import { useUserStore } from "@/stores/user";
import { api } from "@/api";
import Order from "@/components/order/Order.vue";

const user = useUserStore();
const message = useMessage();

const chargeShow = ref(false);
const infoShow = ref(false);

const moneny = ref(0);

async function chargeMoney() {
  const res = (
    await api.patch("/charge", {
      id: user.user.ID,
      money: moneny.value,
    })
  ).data;
  await user.getUserInfo();
  message.success(res?.msg);
  chargeShow.value = false;
}

async function editUserInfo() {
  try {
    const msg = await user.editUserInfo();
    message.success(msg);
  } catch (e: any) {
    message.error(e.response.data.msg);
  }
  await user.getUserInfo();
  infoShow.value = false;
}
</script>

<style lang="less" scoped>
.content {
  margin: 0 1em;
  > * + * {
    margin-top: 1em;
  }

  .info {
    p + p {
      margin-top: 1em;
    }

    p {
      label {
        display: inline-block;
        width: 5em;
      }
    }
  }
}

.edit-info {
  max-width: 500px;
}

.wrapper {
  display: flex;

  .flex-1 {
    flex: 1;
  }
}
</style>
